<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{height: 3000px;}
       
        #box1{width: 100px; height: 100px; background: red; 
         position: relative; left:100px; top:100px;} 
          /* （relative 相对定位）left，right，top，bottom是相对于当前元素自身进行偏移的。 */
        
        #box2{width: 100px; height: 100px; background:blueviolet;
        position: relative;left: 200px;top: 100px;}

        #box3{width: 100px; height: 100px; background:yellow;
            position: relative;left: 300px;top: 100px;}

        #box4{width: 100px; height: 100px;background:rgb(28, 14, 214) ; position: absolute;}
        #box5{width: 200px; height: 200px;background:rgb(221, 18, 120);}
        span{width: 100px;height: 100px;background: turquoise; position: absolute;}
        /* 绝对定位 使元素完全脱离文档流 使内联元素默认宽高（让内联具备块特性） */
        #box6{background: turquoise; position: absolute;left: 500px;bottom: 100px;}

        #box7{width: 300px; height: 300px; border: 2px black solid; ;
         position: relative; left: 600px;bottom: 600px;}
        #box8{width: 100px; height: 100px; background: tomato; 
         position: absolute; right: 0; bottom: 0;}

         #box9{background: red; position: fixed;right: 0; bottom: 0;}
         /* 使元素完全脱离文档流
            使内联元素默认宽高（让内联具备块特性）
            使块元素默认宽根据内容决定（让块具备内联特性）
            如果有定位祖先元素相对于定位祖先元素发生偏移，没有祖先元素相对于等个文档发生偏移
              （绝对，相对，固定） */
         #box10{background: red; position:sticky; top: 0; bottom: 0;}
         /* 在指定位置进行黏性操作。 */
  #box11{width: 100px; height: 100px; background: rgb(13, 179, 52);position:absolute;left: 25px; top: 25px; z-index: inherit 2 ;}
  #box12{width: 100px; height: 100px; background: rgb(201, 225, 65); position:absolute;left: 50px; top: 50px; z-index: 3;}
  
    </style>
</head>
<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <br>
    <br>
    <div id="box4">4</div>
    <div id="box5">5</div>
    <br>
    <br>
    <span>这是一个内联元素span，position让内联具备块特性</span><br><br><br><br><br><br>
    <div id="box6">6这是一个块， 使块元素默认宽根据内容决定（让块具备内联特性）</div>
     <div id="box7">7
         <div id="box8">8</div>
     </div>
     <div id="box9">9这是一个块（可以用作返回顶部按钮 广告）</div>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <P>AAAAAAAAAAAA</P>
     <div id="box10">10这是一个块</div>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>
     <p>bbbbbbbbbbbbb</p>

     
    <div id="box11">11</div>
     <div id="box12">12</div>
   
</body>
</html>